import React, { useState } from 'react';
import { Link,useHistory } from "react-router-dom";
import {Form, Input, Button, DatePicker, Selector, Slider, Stepper, Dialog, NavBar, Toast} from 'antd-mobile';
import request from "../utils/request";

const ret = () =>
    Toast.show({
        content: '点击了返回区域',
        duration: 1000,
    })

export default ()=>{
    const history = useHistory();

    const onFinish = ({username,password,phone}) => {
        request.post('/reg',{
            username,password,phone,
        }).then(({data})=>{

            if(data.success===true){
                // window.location.href='/login';
                history.push('/login');
            }

        })
    }

    return (
        <div style={{position:'fixed',height:'100%',width:'100%',top:0,left:0}}>
            <Form onFinish={onFinish} footer={
                <Button block type='submit' color='primary' > 注册 </Button>
            }>
                <NavBar onBack={ret}>注册一个新账户吧</NavBar>
                <Form.Item
                    name='username'
                    label='姓名'
                    rules={[{ required: true, message: '姓名不能为空' }]}
                >
                    <Input placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item
                    name='password'
                    label='密码'
                    rules={[{ required: true, message: '密码不能为空' }]}
                >
                    <Input placeholder='请输入密码' type='password' />
                </Form.Item>
                <Form.Item name='phone' label='手机号'rules={[{ required: true, message: '请输入正确的手机号' }]}>
                    <Input placeholder='请输入手机号' />
                </Form.Item>

            </Form>

            <div style={{padding:'10px'}}>
                已有帐户！去
                <Link to='/login'>登录</Link>
            </div>
        </div>
    )
}